<template>
	<AdminLayout activeKey="users" :breadcrumbs="['首页','用户管理','角色权限']" tabTitle="用户管理" currentPage="users-roles">
		<view class="page">
			<!-- 页面头部 -->
			<view class="page-header">
				<view class="header-info">
					<text class="page-title">用户管理</text>
					<text class="page-subtitle">管理系统用户账号和权限</text>
				</view>
				<view class="header-actions">
					<view class="search-container">
						<view class="search-box">
							<text class="search-icon iconfont icon-sousuo"></text>
							<input class="search-input" 
								   v-model="searchKeyword" 
								   placeholder="搜索用户名或昵称..." 
								   @confirm="performSearch"
								   confirm-type="search" />
						</view>
						<button class="search-btn" @click="performSearch" :disabled="searching">
							<text class="btn-icon iconfont icon-sousuo"></text>
							<text>{{ searching ? '搜索中...' : '搜索' }}</text>
						</button>
						<button class="clear-btn" @click="clearSearch" v-if="isSearching">
							<text class="btn-icon iconfont icon-qingchu"></text>
							<text>清空</text>
						</button>
					</view>
					<button class="btn-primary" @click="showCreateDialog">
						<text class="btn-icon iconfont icon-xinzeng"></text>
						创建管理员
					</button>
				</view>
			</view>
			
			<!-- 用户统计卡片 -->
			<view class="stats-cards">
				<view class="stat-card">
					<view class="stat-number">{{ totalUserCount }}</view>
					<view class="stat-label">{{ isSearching ? '搜索结果' : '总用户数' }}</view>
				</view>
				<view class="stat-card">
					<view class="stat-number">{{ adminCount }}</view>
					<view class="stat-label">管理员</view>
				</view>
				<view class="stat-card">
					<view class="stat-number">{{ activeCount }}</view>
					<view class="stat-label">活跃用户</view>
				</view>
			</view>
			
			<!-- 用户列表 -->
			<view class="user-table-container">
				<view class="table-header">
					<view class="table-title">用户列表</view>
					<view class="table-actions">
						<button class="btn-secondary" @click="loadUsers">刷新</button>
					</view>
				</view>
				
				<view class="user-table">
					<view class="table-row table-header-row">
						<view class="table-cell cell-user">用户信息</view>
						<view class="table-cell cell-role">角色权限</view>
						<view class="table-cell cell-status">状态</view>
						<view class="table-cell cell-time">时间信息</view>
						<view class="table-cell cell-actions">操作</view>
					</view>
					
					<view class="table-row" v-for="user in filteredUsers" :key="user._id">
						<view class="table-cell cell-user">
							<view class="user-info">
								<view class="user-avatar">
									<text class="avatar-text">{{ getAvatarText(user.username) }}</text>
								</view>
								<view class="user-details">
									<view class="username">{{ user.username }}</view>
									<view class="nickname">{{ user.nickname || '未设置昵称' }}</view>
								</view>
							</view>
						</view>
						
						<view class="table-cell cell-role">
							<view class="role-tags">
								<view :class="['role-tag', isUserAdmin(user) ? 'role-admin' : 'role-user']">
									{{ isUserAdmin(user) ? '管理员' : '普通用户' }}
								</view>
							</view>
						</view>
						
						<view class="table-cell cell-status">
							<view :class="['status-badge', user.status === 0 ? 'status-active' : 'status-inactive']">
								<view class="status-dot"></view>
								<text>{{ user.status === 0 ? '正常' : '禁用' }}</text>
							</view>
						</view>
						
						<view class="table-cell cell-time">
							<view class="time-info">
								<view class="time-item">
									<text class="time-label">创建:</text>
									<text class="time-value">{{ formatDateShort(user.create_date) }}</text>
								</view>
								<view class="time-item">
									<text class="time-label">登录:</text>
									<text class="time-value">{{ formatDateShort(user.last_login_date) }}</text>
								</view>
							</view>
						</view>
						
						<view class="table-cell cell-actions">
							<view class="action-buttons">
								<button class="action-btn btn-edit" @click="editUser(user)" title="编辑用户">
									<text class="btn-icon iconfont icon-edit"></text>
								</button>
								<button class="action-btn btn-role" 
										:class="isUserAdmin(user) ? 'btn-remove-admin' : 'btn-add-admin'"
										@click="toggleUserRole(user)"
										:title="isUserAdmin(user) ? '移除管理员权限' : '授予管理员权限'">
									<text class="btn-icon iconfont" 
										  :class="isUserAdmin(user) ? 'icon-jiaoseguanli' : 'icon-yonghuguanli'"></text>
								</button>
								<button class="action-btn" 
										:class="user.status === 0 ? 'btn-disable' : 'btn-enable'" 
										@click="toggleStatus(user)"
										:title="user.status === 0 ? '禁用用户' : '启用用户'">
									<text class="btn-icon iconfont" :class="user.status === 0 ? 'icon-jinzhi' : 'icon-qiyong'"></text>
								</button>
								<button class="action-btn btn-delete" @click="deleteUser(user)" title="删除用户">
									<text class="btn-icon iconfont icon-shanchu"></text>
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 创建/编辑用户对话框 -->
			<view v-if="showDialog" class="simple-modal">
				<view class="modal-mask" @click="hideDialog"></view>
				<view class="simple-popup">
					<view class="popup-header">
						<text class="popup-title">{{ dialogMode === 'create' ? '创建管理员用户' : '编辑用户信息' }}</text>
						<text class="popup-close" @click="hideDialog">×</text>
					</view>
					
					<view class="form-container">
						<view class="form-item">
							<text class="label">用户名</text>
							<input 
								class="simple-input" 
								:value="userForm.username"
								placeholder="请输入用户名"
								:disabled="dialogMode === 'edit'"
								@input="onUsernameInput" />
						</view>
						
						<view class="form-item">
							<text class="label">密码</text>
							<input 
								class="simple-input" 
								type="password"
								:value="userForm.password"
								:placeholder="dialogMode === 'create' ? '请输入密码' : '留空则不修改密码'"
								@input="onPasswordInput" />
						</view>
						
						<view class="form-item">
							<text class="label">昵称</text>
							<input 
								class="simple-input" 
								:value="userForm.nickname"
								placeholder="请输入昵称"
								@input="onNicknameInput" />
						</view>
						
						<view class="form-item">
							<text class="label">邮箱</text>
							<input 
								class="simple-input" 
								:value="userForm.email"
								placeholder="请输入邮箱"
								@input="onEmailInput" />
						</view>
						
						<view class="form-item">
							<text class="label">手机号</text>
							<input 
								class="simple-input" 
								:value="userForm.mobile"
								placeholder="请输入手机号"
								@input="onMobileInput" />
						</view>
					</view>
					
					<view class="form-actions">
						<button class="cancel-btn" @click="hideDialog">取消</button>
						<button class="submit-btn" @click="submitForm" :disabled="submitting">
							{{ submitting ? (dialogMode === 'create' ? '创建中...' : '更新中...') : (dialogMode === 'create' ? '创建用户' : '保存修改') }}
						</button>
					</view>
				</view>
			</view>
		</view>
	</AdminLayout>
</template>

<script>
import AdminLayout from '@/components/AdminLayout.vue'
export default {
	components: { AdminLayout },
	data() {
		return {
			keyword: '', // 保留原有的实时搜索关键词
			searchKeyword: '', // 搜索框输入的关键词
			userList: [], // 所有用户列表
			filteredUserList: [], // 搜索过滤后的用户列表
			loading: false,
			searching: false, // 搜索状态
			isSearching: false, // 是否处于搜索模式
			showDialog: false,
			dialogMode: 'create', // 'create' or 'edit'
			formData: {
				username: '',
				password: '',
				nickname: '',
				email: '',
				mobile: ''
			},
			userForm: {
				username: '',
				password: '',
				nickname: '',
				email: '',
				mobile: ''
			},
			submitting: false,
			editingUser: null,
		}
	},
	computed: {
		// 显示的用户列表：搜索模式下显示搜索结果，否则显示所有用户
		displayUsers() {
			return this.isSearching ? this.filteredUserList : this.userList;
		},
		// 实时搜索（保留原有功能）
		filteredUsers() {
			if (!this.keyword) return this.displayUsers;
			return this.displayUsers.filter(user => 
				this.safeStringIncludes(user.username, this.keyword) || 
				this.safeStringIncludes(user.nickname, this.keyword)
			);
		},
		// 统计数据基于当前显示的用户列表
		adminCount() {
			return this.displayUsers.filter(user => this.isUserAdmin(user)).length;
		},
		activeCount() {
			return this.displayUsers.filter(user => user.status === 0).length;
		},
		// 总用户数显示
		totalUserCount() {
			return this.displayUsers.length;
		}
	},
	watch: {
		userForm: {
			handler(newVal) {
				console.log('userForm 变化:', newVal);
			},
			deep: true
		},
		showDialog(newVal) {
			if (newVal) {
				console.log('对话框显示，当前表单数据:', this.userForm);
			}
		}
	},
	onLoad() {
		this.loadUsers();
	},
	methods: {
		// 安全的字符串包含检查
		safeStringIncludes(str, searchTerm) {
			return str && typeof str === 'string' && str.toLowerCase().includes(searchTerm.toLowerCase());
		},
		
		// 安全的角色检查
		isUserAdmin(user) {
			return user.role && Array.isArray(user.role) && user.role.includes('admin');
		},
		
		async loadUsers() {
			this.loading = true;
			try {
				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'listUsers'
					}
				});
				
				if (res.result && res.result.code === 0) {
					this.userList = res.result.data || [];
					// 如果不在搜索模式，清空搜索结果
					if (!this.isSearching) {
						this.filteredUserList = [];
					}
				} else {
					uni.showToast({ title: res.result?.msg || '获取用户列表失败', icon: 'none' });
				}
			} catch (e) {
				console.error('获取用户列表失败:', e);
				uni.showToast({ title: '获取用户列表失败', icon: 'none' });
			} finally {
				this.loading = false;
			}
		},
		
		// 执行搜索
		async performSearch() {
			if (!this.searchKeyword.trim()) {
				uni.showToast({ title: '请输入搜索关键词', icon: 'none' });
				return;
			}
			
			this.searching = true;
			
			try {
				console.log('执行搜索:', this.searchKeyword);
				
				// 在本地用户列表中搜索
				const keyword = this.searchKeyword.trim();
				const searchResults = this.userList.filter(user => 
					this.safeStringIncludes(user.username, keyword) || 
					this.safeStringIncludes(user.nickname, keyword) ||
					this.safeStringIncludes(user.email, keyword) ||
					(user.mobile && user.mobile.toString().toLowerCase().includes(keyword.toLowerCase()))
				);
				
				this.filteredUserList = searchResults;
				this.isSearching = true;
				
				if (searchResults.length === 0) {
					uni.showToast({ title: '未找到匹配的用户', icon: 'none' });
				} else {
					uni.showToast({ title: `找到 ${searchResults.length} 个用户`, icon: 'success' });
				}
				
			} catch (e) {
				console.error('搜索失败:', e);
				uni.showToast({ title: '搜索失败', icon: 'none' });
			} finally {
				this.searching = false;
			}
		},
		
		// 清空搜索
		clearSearch() {
			this.searchKeyword = '';
			this.filteredUserList = [];
			this.isSearching = false;
			this.keyword = ''; // 同时清空实时搜索
			uni.showToast({ title: '已清空搜索', icon: 'success' });
		},
		
		showCreateDialog() {
			console.log('显示创建对话框');
			
			this.dialogMode = 'create';
			this.editingUser = null;
			
			// 重置表单数据
			this.userForm = {
				username: '',
				password: '',
				nickname: '',
				email: '',
				mobile: ''
			};
			
			this.showDialog = true;
		},
		
		editUser(user) {
			console.log('编辑用户数据:', user);
			
			this.dialogMode = 'edit';
			this.editingUser = user;
			
			// 设置表单数据
			this.userForm = {
				username: user.username || '',
				password: '',
				nickname: user.nickname || '',
				email: user.email || '',
				mobile: user.mobile || ''
			};
			
			console.log('当前表单数据:', this.userForm);
			
			this.showDialog = true;
		},
		
		
		hideDialog() {
			this.showDialog = false;
			this.userForm = {
				username: '',
				password: '',
				nickname: '',
				email: '',
				mobile: ''
			};
			this.editingUser = null;
		},
		
		resetForm() {
			this.userForm = {
				username: '',
				password: '',
				nickname: '',
				email: '',
				mobile: ''
			};
		},
		
		async submitForm() {
			if (!this.userForm.username) {
				uni.showToast({ title: '请输入用户名', icon: 'none' });
				return;
			}
			
			if (this.dialogMode === 'create' && !this.userForm.password) {
				uni.showToast({ title: '请输入密码', icon: 'none' });
				return;
			}
			
			this.submitting = true;
			
			try {
				if (this.dialogMode === 'create') {
					// 创建用户
					const res = await uniCloud.callFunction({
						name: 'initAdmin',
						data: {
							action: 'createAdmin',
							username: this.userForm.username,
							password: this.userForm.password,
							nickname: this.userForm.nickname,
							email: this.userForm.email,
							mobile: this.userForm.mobile
						}
					});
					
					if (res.result && res.result.code === 0) {
						uni.showToast({ title: '创建成功', icon: 'success' });
						this.hideDialog();
						this.loadUsers();
					} else {
						uni.showToast({ title: res.result?.msg || '创建失败', icon: 'none' });
					}
				} else {
					// 更新用户
					const updates = {
						nickname: this.userForm.nickname,
						email: this.userForm.email,
						mobile: this.userForm.mobile
					};
					
					// 如果输入了新密码，则更新密码
					if (this.userForm.password) {
						updates.password = this.userForm.password;
					}
					
					const res = await uniCloud.callFunction({
						name: 'initAdmin',
						data: {
							action: 'updateUser',
							userId: this.editingUser._id,
							updates: updates
						}
					});
					
					if (res.result && res.result.code === 0) {
						uni.showToast({ title: '更新成功', icon: 'success' });
						this.hideDialog();
						this.loadUsers();
					} else {
						uni.showToast({ title: res.result?.msg || '更新失败', icon: 'none' });
					}
				}
			} catch (e) {
				console.error('操作失败:', e);
				uni.showToast({ title: '操作失败', icon: 'none' });
			} finally {
				this.submitting = false;
			}
		},
		
		async toggleUserRole(user) {
			const isAdmin = this.isUserAdmin(user);
			const actionText = isAdmin ? '移除管理员权限' : '授予管理员权限';
			const confirmText = isAdmin ? 
				`确定要移除用户 "${user.username}" 的管理员权限吗？` : 
				`确定要授予用户 "${user.username}" 管理员权限吗？`;
			
			uni.showModal({
				title: '权限管理',
				content: confirmText,
				success: async (res) => {
					if (res.confirm) {
						try {
							const newRole = isAdmin ? ['user'] : ['admin'];
							const updateRes = await uniCloud.callFunction({
								name: 'initAdmin',
								data: {
									action: 'updateUser',
									userId: user._id,
									updates: { role: newRole }
								}
							});
							
							if (updateRes.result && updateRes.result.code === 0) {
								const successText = isAdmin ? '已移除管理员权限' : '已授予管理员权限';
								uni.showToast({ title: successText, icon: 'success' });
								this.loadUsers();
							} else {
								uni.showToast({ title: updateRes.result?.msg || '权限更新失败', icon: 'none' });
							}
						} catch (e) {
							console.error('权限更新失败:', e);
							uni.showToast({ title: '权限更新失败', icon: 'none' });
						}
					}
				}
			});
		},

		async toggleStatus(user) {
			try {
				const newStatus = user.status === 0 ? 1 : 0;
				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'updateUser',
						userId: user._id,
						updates: { status: newStatus }
					}
				});
				
				if (res.result && res.result.code === 0) {
					uni.showToast({ title: newStatus === 0 ? '已启用' : '已禁用', icon: 'success' });
					this.loadUsers();
				} else {
					uni.showToast({ title: res.result?.msg || '操作失败', icon: 'none' });
				}
			} catch (e) {
				console.error('切换状态失败:', e);
				uni.showToast({ title: '操作失败', icon: 'none' });
			}
		},
		
		async deleteUser(user) {
			uni.showModal({
				title: '确认删除',
				content: `确定要删除用户 "${user.username}" 吗？此操作不可恢复！`,
				success: async (res) => {
					if (res.confirm) {
						try {
							const deleteRes = await uniCloud.callFunction({
								name: 'initAdmin',
								data: {
									action: 'deleteUser',
									userId: user._id
								}
							});
							
							if (deleteRes.result && deleteRes.result.code === 0) {
								uni.showToast({ title: '删除成功', icon: 'success' });
								this.loadUsers();
							} else {
								uni.showToast({ title: deleteRes.result?.msg || '删除失败', icon: 'none' });
							}
						} catch (e) {
							console.error('删除用户失败:', e);
							uni.showToast({ title: '删除失败', icon: 'none' });
						}
					}
				}
			});
		},
		
		formatDate(timestamp) {
			if (!timestamp) return '-';
			const date = new Date(timestamp);
			return date.toLocaleString('zh-CN');
		},
		
		formatDateShort(timestamp) {
			if (!timestamp) return '-';
			const date = new Date(timestamp);
			const now = new Date();
			const diffTime = now - date;
			const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
			
			if (diffDays === 0) {
				return '今天';
			} else if (diffDays === 1) {
				return '昨天';
			} else if (diffDays < 7) {
				return `${diffDays}天前`;
			} else {
				return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
			}
		},
		
		getAvatarText(username) {
			if (!username) return '?';
			// 如果是中文，取第一个字符
			if (/[\u4e00-\u9fa5]/.test(username)) {
				return username.charAt(0);
			}
			// 如果是英文，取前两个字母大写
			return username.substring(0, 2).toUpperCase();
		},
		
		// 处理各个字段的输入
		onUsernameInput(event) {
			const value = event.detail.value;
			console.log('用户名输入:', value);
			this.userForm.username = value;
		},
		
		onPasswordInput(event) {
			const value = event.detail.value;
			console.log('密码输入:', value);
			this.userForm.password = value;
		},
		
		onNicknameInput(event) {
			const value = event.detail.value;
			console.log('昵称输入:', value);
			this.userForm.nickname = value;
		},
		
		onEmailInput(event) {
			const value = event.detail.value;
			console.log('邮箱输入:', value);
			this.userForm.email = value;
		},
		
		onMobileInput(event) {
			const value = event.detail.value;
			console.log('手机号输入:', value);
			this.userForm.mobile = value;
		}
	}
}
</script>

<style scoped>
/* 页面主体 */
.page {
	padding: 32rpx;
	background: #f8fafc;
	min-height: 100vh;
}

/* 页面头部 */
.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32rpx;
	padding: 0 8rpx;
}

.header-info .page-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #1a202c;
	margin-bottom: 8rpx;
	display: block;
}

.header-info .page-subtitle {
	font-size: 28rpx;
	color: #718096;
	display: block;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 24rpx;
}

.search-container {
	display: flex;
	align-items: center;
	gap: 12rpx;
	background: #fff;
	border-radius: 20rpx;
	padding: 8rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid #f1f5f9;
	transition: all 0.3s ease;
	min-width: 400rpx;
}

.search-container:focus-within {
	border-color: #e2e8f0;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
}

.search-box {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
	padding: 0 20rpx;
}

.search-icon {
	margin-right: 12rpx;
	font-size: 32rpx;
	color: #64748b;
	transition: color 0.3s ease;
}

.search-icon.iconfont {
	font-size: 28rpx;
}

.search-input {
	flex: 1;
	height: 72rpx;
	font-size: 28rpx;
	color: #1e293b;
	background: transparent;
	border: none;
	outline: none;
}

.search-input::placeholder {
	color: #94a3b8;
}

.btn-primary {
	display: flex;
	align-items: center;
	gap: 8rpx;
	background: #6366f1;
	color: #fff;
	border: none;
	border-radius: 16rpx;
	padding: 20rpx 32rpx;
	font-size: 28rpx;
	font-weight: 500;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.btn-primary:hover {
	background: #5855eb;
	transform: translateY(-1rpx);
}

.btn-primary:active {
	transform: translateY(0);
}

.btn-icon {
	font-size: 32rpx;
}

.btn-icon.iconfont {
	font-size: 28rpx;
}

/* 搜索按钮样式 */
.search-btn {
	display: flex;
	align-items: center;
	gap: 6rpx;
	background: #6366f1;
	color: #fff;
	border: none;
	border-radius: 16rpx;
	padding: 20rpx 28rpx;
	font-size: 26rpx;
	font-weight: 500;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.search-btn:hover:not(:disabled) {
	background: #5855eb;
	transform: translateY(-1rpx);
}

.search-btn:active:not(:disabled) {
	transform: translateY(0);
}

.search-btn:disabled {
	background: #94a3b8;
	cursor: not-allowed;
	transform: none;
}

.clear-btn {
	display: flex;
	align-items: center;
	gap: 6rpx;
	background: #64748b;
	color: #fff;
	border: none;
	border-radius: 16rpx;
	padding: 20rpx 28rpx;
	font-size: 26rpx;
	font-weight: 500;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.clear-btn:hover {
	background: #475569;
	transform: translateY(-1rpx);
}

.clear-btn:active {
	transform: translateY(0);
}

/* 统计卡片 */
.stats-cards {
	display: flex;
	gap: 24rpx;
	margin-bottom: 32rpx;
}

.stat-card {
	flex: 1;
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	text-align: center;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	border: 2rpx solid #f1f5f9;
	transition: all 0.3s ease;
}

.stat-card:hover {
	transform: translateY(-4rpx);
	box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);
}

.stat-number {
	font-size: 56rpx;
	font-weight: 800;
	color: #4f46e5;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 26rpx;
	color: #64748b;
	font-weight: 500;
}

/* 用户表格容器 */
.user-table-container {
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	border: 2rpx solid #f1f5f9;
	overflow: hidden;
}

.table-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx;
	border-bottom: 2rpx solid #f1f5f9;
}

.table-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #1a202c;
}

.btn-secondary {
	display: flex;
	align-items: center;
	gap: 8rpx;
	background: #f8fafc;
	color: #64748b;
	border: 1rpx solid #e2e8f0;
	border-radius: 12rpx;
	padding: 16rpx 24rpx;
	font-size: 26rpx;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s ease;
}

.btn-secondary:hover {
	background: #f1f5f9;
	color: #475569;
	border-color: #cbd5e1;
	transform: translateY(-1rpx);
}

.btn-secondary:active {
	transform: translateY(0);
}

/* 用户表格 */
.user-table {
	width: 100%;
}

.table-row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.5fr 1fr;
	align-items: center;
	padding: 24rpx 32rpx;
	border-bottom: 2rpx solid #f8fafc;
	transition: all 0.3s ease;
}

.table-row:hover:not(.table-header-row) {
	background: #f8fafc;
}

.table-header-row {
	background: #f8fafc;
	font-weight: 600;
	color: #4a5568;
	font-size: 26rpx;
	border-bottom: 2rpx solid #e2e8f0;
}

.table-cell {
	padding: 0 8rpx;
}

/* 用户信息 */
.user-info {
	display: flex;
	align-items: center;
	gap: 24rpx;
}

.user-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: #fff;
	font-size: 28rpx;
}

.user-details .username {
	font-size: 30rpx;
	font-weight: 600;
	color: #1a202c;
	margin-bottom: 4rpx;
}

.user-details .nickname {
	font-size: 24rpx;
	color: #718096;
}

/* 角色标签 */
.role-tags {
	display: flex;
	gap: 8rpx;
}

.role-tag {
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	font-size: 22rpx;
	font-weight: 600;
}

.role-admin {
	background: #fef2f2;
	color: #dc2626;
	border: 2rpx solid #fecaca;
}

.role-user {
	background: #f0f9ff;
	color: #0284c7;
	border: 2rpx solid #bae6fd;
}

/* 状态徽章 */
.status-badge {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 12rpx 20rpx;
	border-radius: 12rpx;
	font-size: 24rpx;
	font-weight: 600;
	width: fit-content;
}

.status-active {
	background: #f0fdf4;
	color: #16a34a;
	border: 2rpx solid #bbf7d0;
}

.status-inactive {
	background: #fef2f2;
	color: #dc2626;
	border: 2rpx solid #fecaca;
}

.status-dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
}

.status-active .status-dot {
	background: #16a34a;
}

.status-inactive .status-dot {
	background: #dc2626;
}

/* 时间信息 */
.time-info {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.time-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.time-label {
	font-size: 22rpx;
	color: #9ca3af;
	min-width: 60rpx;
}

.time-value {
	font-size: 24rpx;
	color: #374151;
	font-weight: 500;
}

/* 操作按钮 */
.action-buttons {
	display: flex;
	gap: 12rpx;
	justify-content: center;
}

.action-btn {
	width: 64rpx;
	height: 64rpx;
	border-radius: 12rpx;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	transition: all 0.3s ease;
}

.action-btn .btn-icon.iconfont {
	font-size: 24rpx;
}

.btn-edit {
	background: #eff6ff;
	color: #2563eb;
}

.btn-edit:hover {
	background: #dbeafe;
	transform: scale(1.1);
}

.btn-disable {
	background: #fef2f2;
	color: #dc2626;
}

.btn-disable:hover {
	background: #fee2e2;
	transform: scale(1.1);
}

.btn-enable {
	background: #f0fdf4;
	color: #16a34a;
}

.btn-enable:hover {
	background: #dcfce7;
	transform: scale(1.1);
}

.btn-delete {
	background: #fefbfb;
	color: #ef4444;
}

.btn-delete:hover {
	background: #fef2f2;
	transform: scale(1.1);
}

.btn-role {
	transition: all 0.3s ease;
}

.btn-add-admin {
	background: #ecfdf5;
	color: #059669;
}

.btn-add-admin:hover {
	background: #d1fae5;
	transform: scale(1.1);
}

.btn-remove-admin {
	background: #fef3c7;
	color: #d97706;
}

.btn-remove-admin:hover {
	background: #fde68a;
	transform: scale(1.1);
}

/* 模态框样式 */
.modal-overlay {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.6);
	backdrop-filter: blur(8rpx);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.modal-container {
	width: 90%;
	max-width: 800rpx;
	background: #fff;
	border-radius: 24rpx;
	box-shadow: 0 20rpx 40rpx rgba(0,0,0,0.15);
	animation: slideUp 0.3s ease;
}

@keyframes slideUp {
	from { 
		opacity: 0;
		transform: translateY(40rpx) scale(0.95);
	}
	to { 
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx;
	border-bottom: 2rpx solid #f1f5f9;
}

.modal-title {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.title-icon {
	font-size: 40rpx;
}

.title-icon.iconfont {
	font-size: 36rpx;
}

.title-text {
	font-size: 36rpx;
	font-weight: 700;
	color: #1a202c;
}

.modal-close {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	background: #f8fafc;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	color: #6b7280;
	transition: all 0.3s ease;
}

.modal-close:hover {
	background: #e5e7eb;
	transform: scale(1.1);
}

.modal-body {
	padding: 40rpx;
}

.form-grid {
	display: flex;
	flex-direction: column;
	gap: 32rpx;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
	pointer-events: auto;
}

.form-label {
	font-size: 28rpx;
	font-weight: 600;
	color: #374151;
}

.input-wrapper {
	position: relative;
}

.form-input {
	width: 100%;
	padding: 24rpx 20rpx;
	border: 2rpx solid #e5e7eb;
	border-radius: 16rpx;
	font-size: 28rpx;
	color: #374151;
	background: #fff;
	transition: all 0.3s ease;
	pointer-events: auto;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
}

.form-input:focus {
	border-color: #4f46e5;
	box-shadow: 0 0 0 6rpx rgba(79, 70, 229, 0.1);
	outline: none;
}

.form-input:disabled {
	background-color: #f9fafb;
	color: #6b7280;
	cursor: not-allowed;
}

.modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 24rpx;
	padding: 40rpx;
	border-top: 2rpx solid #f1f5f9;
}

.btn-cancel {
	padding: 20rpx 40rpx;
	border: 2rpx solid #e5e7eb;
	background: #fff;
	color: #6b7280;
	border-radius: 16rpx;
	font-size: 28rpx;
	font-weight: 600;
	transition: all 0.3s ease;
}

.btn-cancel:hover {
	background: #f9fafb;
	border-color: #d1d5db;
}

.btn-submit {
	padding: 20rpx 40rpx;
	background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
	color: #fff;
	border: none;
	border-radius: 16rpx;
	font-size: 28rpx;
	font-weight: 600;
	box-shadow: 0 8rpx 16rpx rgba(79, 70, 229, 0.3);
	transition: all 0.3s ease;
}

.btn-submit:hover:not(:disabled) {
	transform: translateY(-2rpx);
	box-shadow: 0 12rpx 24rpx rgba(79, 70, 229, 0.4);
}

.btn-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* 简单弹窗样式 */
.simple-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
}

.simple-popup {
	position: relative;
	width: 600rpx;
	max-width: 90vw;
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	z-index: 10000;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	background: #f8f9fa;
	border-bottom: 1rpx solid #e9ecef;
}

.popup-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.popup-close {
	font-size: 40rpx;
	color: #666;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.popup-close:hover {
	background: #e9ecef;
}

.form-container {
	padding: 30rpx;
	max-height: 70vh;
	overflow-y: auto;
}

.form-item {
	margin-bottom: 30rpx;
}

.label {
	display: block;
	margin-bottom: 10rpx;
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.simple-input {
	width: 100%;
	height: 80rpx;
	padding: 0 20rpx;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	font-size: 28rpx;
	background: #fff;
	box-sizing: border-box;
	outline: none;
}

.simple-input:focus {
	border-color: #007aff;
	box-shadow: 0 0 0 2rpx rgba(0, 122, 255, 0.2);
}

.simple-input:disabled {
	background: #f5f5f5;
	color: #999;
	cursor: not-allowed;
}

.form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 20rpx;
	padding: 30rpx;
	border-top: 1rpx solid #e9ecef;
	background: #f8f9fa;
}

.cancel-btn, .submit-btn {
	padding: 16rpx 32rpx;
	border-radius: 8rpx;
	font-size: 28rpx;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

.cancel-btn {
	background: #6c757d;
	color: #fff;
}

.cancel-btn:hover {
	background: #5a6268;
}

.submit-btn {
	background: #007aff;
	color: #fff;
}

.submit-btn:hover:not(:disabled) {
	background: #0056cc;
}

.submit-btn:disabled {
	background: #ccc;
	cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 900px) {
	.page {
		padding: 24rpx;
	}
	
	.page-header {
		flex-direction: column;
		align-items: stretch;
		gap: 24rpx;
	}
	
	.header-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 20rpx;
	}
	
	.search-container {
		min-width: auto;
		width: 100%;
		flex-wrap: wrap;
		padding: 12rpx;
	}
	
	.search-box {
		min-width: 200rpx;
	}
	
	.search-btn, .clear-btn {
		padding: 18rpx 24rpx;
		font-size: 24rpx;
	}
	
	.btn-primary {
		justify-content: center;
		width: 100%;
	}
	
	.stats-cards {
		flex-direction: column;
	}
	
	.table-row {
		grid-template-columns: 1fr;
		gap: 16rpx;
		padding: 24rpx 16rpx;
	}
	
	.table-cell {
		padding: 8rpx 0;
	}
	
	.user-info {
		justify-content: flex-start;
	}
	
	.action-buttons {
		justify-content: flex-start;
	}
	
	.popup-content {
		width: 90vw;
	}
}

@media (max-width: 600px) {
	.search-container {
		flex-direction: column;
		gap: 16rpx;
		padding: 16rpx;
	}
	
	.search-box {
		width: 100%;
	}
	
	.search-btn, .clear-btn {
		width: 100%;
		justify-content: center;
	}
}
</style> 